<template>
  <el-dialog
    v-model="dialogPrint.visible"
    :title="dialogPrint.title"
    width="800px"
    draggable
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <article id="printMe" class="print_contain">
      <div class="section_contain">
        <h1 style="text-align: center; font-size: 1.5em; font-weight: bold">农民工工资专户销户通知书</h1>
        <p>
          <span>&nbsp;</span
          ><span class="serialLine font_other"
            >申请流水号：&nbsp;&nbsp;<span id="serialNum" class="pathText serialText">{{
              moment.now().toString()
            }}</span></span
          >
        </p>
        <section style="margin-top: 30px">
          <p class="font_other">
            致：&nbsp;&nbsp;<span id="bankName" class="pathText bankText">{{ dataInfo.bankName }}</span>
          </p>
          <div style="text-indent: 2em; line-height: 35px">
            根据 &nbsp;&nbsp;⟪关于进一步加强全区建筑工人实名制管理工作的通知⟫&nbsp;&nbsp;
            等相关文件要求，本企业在&nbsp;&nbsp;
            <span id="placeText" class="pathText">{{ dataInfo.fullAddress }}</span
            >&nbsp;&nbsp; 承包&nbsp;&nbsp;<span id="projectText" class="pathText">{{ dataInfo.projectName }}</span
            >&nbsp;&nbsp;已完工，需请贵行办理销户事宜 。
            <p class="shuojin">账号：</p>
            <p class="shuojin">户号：</p>
          </div>
          <div>
            <span>&nbsp;</span>
            <p class="serialLine">{{ dataInfo.lumpContractorCorpName }}(加盖公章)：</p>
          </div>
          <div style="margin-top: 15px">
            <span>&nbsp;</span>
            <p class="serialLine">______年____月____日</p>
          </div>
        </section>
      </div>
    </article>

    <template #footer>
      <div class="dialog_footer">
        <el-button v-print="printObj" type="success" :loading="loading" plain>{{ dialogPrint.footBtn }}</el-button>
        <el-button type="primary" :loading="loading" plain @click="downloadPDF()">下载</el-button>
        <el-button @click="closeDialog()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import moment from "moment";
import htmlToPdf from "@/utils/pdf";
import { GetProjectSpecialAccount } from "@/api/specialaccount/index";
import { ref } from "vue";

const emit = defineEmits(["sendClose"]);

const props = defineProps({
  dialogPrint: {
    type: Object,
    default: () => ({
      visible: false,
      title: "农民工工资专户销户通知书",
      footBtn: "打印",
      id: undefined,
    }),
  },
});
const dataInfo = ref<any>({});

onMounted(() => {
  if (dialogPrint.value.id) {
    GetProjectSpecialAccount(dialogPrint.value.id).then((res) => {
      if (res.type == 0 && res.success) dataInfo.value = res.data;
    });
  }
});

const loading = ref(false);
const { dialogPrint } = toRefs(props);
const printObj = reactive({
  id: "printMe", // 还可以采用url，如 url: 'http://localhost:8080/'
  preview: false, // 打印预览
  previewTitle: "农民工工资专户销户通知书", // The title of the preview window. The default is 打印预览
  standard: "HTML5", //HTML5/loose/strict
  popTitle: "农民工工资专户销户通知书",
  previewBeforeOpenCallback() {
    console.log("正在加载预览窗口");
    loading.value = true;
  },
  previewOpenCallback() {
    console.log("已经加载完预览窗口");
  },

  beforeOpenCallback(vue: any) {
    console.log("打开之前", vue);
  },
  openCallback(vue: any) {
    console.log("执行了打印", vue);
  },
  closeCallback(vue: any) {
    console.log("关闭了打印工具", vue);
    loading.value = false;
  },
});
const downloadPDF = () => {
  htmlToPdf("农民工工资专户销户通知书", "#printMe");
};

function closeDialog() {
  sendPrintClose();
}

function sendPrintClose() {
  emit("sendClose");
}
</script>

<style lang="less" scoped>
@page {
  size: auto;
  margin: 0mm;
  margin-top: 20mm;
}
.procedure {
  word-wrap: break-word;
}
@media print {
  //样式写在这里面
}
.title {
  word-wrap: break-word; //内容不自动换行问题
}

* {
  font-size: 18px;
  /* font-weight: 500; */
  /* font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; */
  /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
  font-family: "Arial Narrow", Arial, sans-serif;
}
.print_contain {
  width: 100%;
  height: 600px;
  position: relative;
}

.pathText {
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.serialLine {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

.section_contain {
  width: 630px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

p {
  line-height: 22px;
}

.shuojin {
  text-indent: 2em;
}
.shuojin3 {
  text-indent: 3.6em;
}
</style>
